{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
{% for adv_obj in adv_data %}
    <div class="thumbnail adv-container">
        <img data-src="holder.js/100x200?theme=gray" src="/media/{{ adv_obj.img }}" data-holder-rendered="true"
             style="height: 200px; width: 100%; display: block;">
        <div class="caption">
            <h3>{{ adv_obj.title }}</h3>
            <p>&nbsp;&nbsp;{{ adv_obj.content }}</p>
            <p><a href="https://www.yinfans.me/" class="btn btn-primary" role="button"
                  target="_blank">了解详情</a>
                <a href="#" class="btn btn-default btn_adv"
                   role="button" id="btn_close_adv">关闭广告</a>
            </p>
        </div>
    </div>

{% endfor %}
<script>
    // 当我点击关闭广告按钮的时候发现只能关闭一个广告，而其他广告信息不会消失
    // 当我们想要在页面上对多个同一属性的标签生效的时候一定要使用 类属性而不是 ID属性，因为 ID 属性具有唯一性
 $(".btn_adv").click(function () {
        $(this).closest(".adv-container").hide();
    });
</script>

</body>
</html>